<template>
  <div class="reportchartssankey">
    <div class="repecharts" :id="timeId" :style="'height:'+ repechartsHeight + 'px'"></div>
  </div>
</template>

<script>
  let echarts = require("echarts");
  let moment = require("moment");
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  let unit = reportGlobal.unit;
  let colorList = reportGlobal.colorList;
  export default {
    props:{
      con_w:{
        default:function () {
          return ''
        }
      }
    },
    data() {
      return {
        Echarts:null,
        timeId:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts",
        repechartsHeight:500,
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },

          series: []
        },

        option:{
          title: {
            text: '导流店铺与被导流店铺',
            left:'center'
          },
          series: {
            type: 'sankey',
            layout: 'none',
            top:'10%',
            focusNodeAdjacency: 'allEdges',
            data: [],
            links: [],
            lineStyle: {
              color: "source",
              curveness: 0.5
            },
          },
          tooltip: {
            trigger: "item"
          }
        },
      }
    },
    created() {

    },
    mounted() {
      this.Echarts = echarts.init(document.getElementById(this.timeId));
      this.loadEchart(this.defaultEcharts);
      setTimeout(() => {
        this.loadEchartResize(this.con_w);
      }, 200);
    },
    watch:{
      con_w(val){
        console.log(val,'con_w');
        this.loadEchartResize(val);
      }
    },
    methods:{
      upData(formList,toList,areaName,indicator_key_name){
        console.log(formList,'formList');
        console.log(toList,'formList');
        if(!formList || formList.length == 0 && toList.length == 0){
          this.loadEchart(this.defaultEcharts);
          return
        }
        console.log(areaName);
        let title = `${areaName}-${indicator_key_name}-导流图`
        console.log(title,'title');
        this.option.series.data = []
        this.option.series.links = []
        let color = ["#8032e2", "#e858bd", "#ea6881", "#f28e7b", "#f1b89b", "#f2dfa5", "#5db8ff", "#e7780b", "#eb5c5c",'#9dff6d']
        let idColor = {}
        let main_id = formList[0] ? formList[0].target_id : toList[0] ? toList[0].source_id : ''
        let main_name = formList[0] ? formList[0].target_name : toList[0] ? toList[0].source_name : ''
        let idList = [...new Set([main_id,...formList.map(x=>x.source_id),...toList.map(x=>x.target_id)])]//获取到不重复的店铺id
        //根据不同id配置对应的颜色
        for(let i in idList){
          let num = i % color.length
          idColor[idList[i]] = color[num]
        }
        if(formList.length){
          for(let i in formList){
            let dataObj = {name:''}
            let linksObj = {source: '', target: '', value: 0};

            for(let j in idColor){
              if(j == formList[i].source_id){
                dataObj.name = formList[i].source_name + ' '
                dataObj.itemStyle = {
                  "normal": {
                    "color": idColor[j],
                    "borderColor": idColor[j]
                  }
                }
              }
            }

            linksObj.source = formList[i].source_name + ' '
            linksObj.target = formList[i].target_name
            linksObj.value = Number(formList[i].value)
            this.option.series.data.push(dataObj)
            this.option.series.links.push(linksObj)
          }
        }
        if(toList.length){
          for(let i in toList){
            let dataObj = {name:''}
            let linksObj = {source: '', target: '', value: 0};

            for(let j in idColor){
              if(j == toList[i].target_id){
                dataObj.name = ' ' + toList[i].target_name
                dataObj.itemStyle = {
                  "normal": {
                    "color": idColor[j],
                    "borderColor": idColor[j]
                  }
                }
              }
            }

            linksObj.source = toList[i].source_name
            linksObj.target = ' ' + toList[i].target_name
            linksObj.value = Number(toList[i].value)
            this.option.series.data.push(dataObj)
            this.option.series.links.push(linksObj)
          }
        }
        this.option.series.data.push({
          name : main_name,
          itemStyle : {
            "normal": {
              "color": idColor[main_id],
              "borderColor": idColor[main_id]
            }
          }
        })

        this.option.title.text = title
        this.$nextTick(()=>{
          this.loadEchart(this.option)
        })

      },
      loadEchart(option) {
        console.log(option);
        this.Echarts.setOption(option,true);
      },
      loadEchartResize(w) {
        let opts = { width: (w - 30) ,height:this.repechartsHeight};
        this.Echarts.resize(opts);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .reportchartssankey {
    width: 100%;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    font-size: 0px;
    height: auto;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
    }
    .repecharts {
      width: 100%;
      height: 580px;
      display: inline-block;
    }

    .el-tabs {
      overflow: inherit;

      .el-tabs__header {
        width: 85px;

        .el-tabs__item {
          span {
            font-size: 16px;

            i {
              margin-right: 8px;
            }
          }
        }
      }

      .el-tabs__content {
        overflow: inherit;

        .tab-block {
          display: none !important;
        }
      }
    }

    .kpi {
      position: absolute;
      top: -45px;
      right: 0;
      margin-right: 60px;
    }

    .kpis {
      position: absolute;
      left: 210px;
      top: -45px;
    }

    .timeoption {
      position: absolute;
      right: 0;
      top: -55px;
      .on {
        .el-input--suffix {
          .el-input__inner {
            color: #e8eeff;
            background: #5580ff;
          }
        }
      }
      margin-right: 60px;
      line-height: 48px;
      label {
        font-size: 18px;
        vertical-align: top;
      }
      .el-select {
        display: inline-block;
        margin-left: 5px;
        width: 72px;
        height: 30px;
        .el-input__inner {
          box-sizing: border-box;
          height: 32px;
          text-align: center;
          padding: 0 18px 0 0;
          width: 100%;
          font-size: 14px;
        }
        .el-input {
          position: relative;
          z-index: 9;

          .el-input__suffix {
            .el-input__suffix-inner {
              line-height: 100%;
              display: inline-block;
            }
            right: 0;
            span {
              .el-select__caret {
                font-size: 12px;
                color: #8ba9ff;
              }
            }
          }
        }
      }
      .timebtn {
        float: right;
        display: block;
        height: 100%;
        padding-top: 10px;
        //margin-left: -3px;
        a,
        .el-radio {
          border: 1px solid #dbe1e5;
          border-left: none;
          margin: 0 !important;
          float: left;
          height: 30px;
          line-height: 30px;
          color: #737373;
          font-size: 14px;
          padding: 0 18px;
          cursor: pointer;
          .el-radio__input {
            display: none;
          }
          .el-radio__label {
            padding: 0;
            line-height: 30px;
          }
          &.on,
          &.is-checked {
            color: #e8eeff !important;
            .el-radio__label {
              color: #e8eeff;
            }
            background: #5580ff !important;
          }
          &:first-child {
            border-left: 1px solid #dbe1e5;
            border-radius: 5px 0 0 5px;
          }
          &:last-child {
            border-radius: 0 5px 5px 0;
          }
          &:hover {
            background: #ebebeb;
            color: #333;
            opacity: 0.9;
          }
        }
      }
    }
  }
</style>